<template>
	<div id="page">
		<van-nav-bar class="navTop" title="Help" left-arrow=""  @click-left="navLeft" ></van-nav-bar>
		<img class="page-bg" src="../../assets/app-bg.jpg" >
		
		<div class="main">
			<div class="bok">
				<form  @submit="formSubmit" >
					<h3>Problem</h3>
					<div class="info-box">
						<input type="text" name="title" class="title" placeholder="Feedback title"  value="" />
						<textarea name="info" class="info" placeholder="input question" rows="" cols=""></textarea>
					</div>
					
					<div class="upImg">
						<div class="img iconfont f-c-lan">
							&#xe780;
						</div>
						<div class="img">
							<!-- <img class="mi" src="../../assets/benner.png" > -->
						</div>
					</div>
					<button class="sub btn-c-lan" form-type="submit">Submit</button>
				</form>
			</div>
			
			<div class="hr"></div>
			
			<div class="bok">
				<h3 class="tiyle">Feedback title</h3>
				
				<div class="box" v-for="item in 2">
					<div class="t">
						<p class="tit">Feedback title</p>
						<span class="time">2022.3.3</span>
					</div>
					<div class="text">
						technology and finance. It integrates the top ten mainstream 
						exchanges in the world, aggregation depth, one platform, globa
					</div>
				</div>
				
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		name:"help",
		data() {
			return {
				
			}
		},
		methods: {
			navLeft(){
				 this.$router.go(-1);//返回上一层
			},
			
			formSubmit:function(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{ }
	
	.bok{padding: 0px 30px;}
	
	.tiyle{font-weight: 300; margin: 0px; height:100px; line-height: 100px; }
	
	.info-box{
		border: 2px solid #07ACCA; border-radius: 10px;
		padding: 0px 30px;
		.title{
			border: none;
			border-bottom: 1px solid #07ACCA; line-height: 80px;
			display: block; width: 100%;
			background: transparent;
		}
		.info{
			display: block; width: 100%; border: none;
			height: 250px;
			background: transparent;
		}
	}
	.upImg{
	
		margin:15px -15px;
		
		.img{
			height: 150px; width: 150px; border: 2px solid #07ACCA;box-sizing: border-box;
			border-radius: 10px;
			overflow: hidden;
			display: inline-block; margin: 15px;
			line-height: 150px; font-size: 70px; text-align: center;
			
			.mi{width: 100%;height: 100%;}
		}
	}
	.sub{
		display: block;
		width: 500px; margin:30px auto;
		height: 80px; line-height: 80px; border:none ; border-radius: 50px;
		color: #333;  font-size: 40px;
	}
	
	.hr{
		height: 20px; background: #31394e;
	}
	
	.box{
		border-top: 2px solid #333;
		
		.t{display: flex; 
		line-height: 80px;
			.tit{flex: 1; 
				 white-space:nowrap;/* 规定文本是否折行 */  
				  overflow: hidden;/* 规定超出内容宽度的元素隐藏 */
				  text-overflow: ellipsis;
				font-size: 30px;
				  color: #ce9d11;
			}
			.time{color: #aaa;}
		}
		.text{
			padding-bottom: 30px;
		}
	}
	
	
</style>
